<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      // 键盘事件
      // 1.键盘按下 onkeydown 键盘按下时候触发（任何一个按键按压都能触发一次)
      //   document.onkeydown = function () {
      //     console.log("按下");
      //   };
      // 2.键盘按键抬起 onkeyup
      //   document.onkeyup = function () {
      //     console.log("键盘抬起");
      //   };

      // 3.键盘按压 onkeypress :注意有些特殊的按键触发没反应； 数字字符都是可以触发的；
      // document.onkeypress = function(){
      //     console.log("键盘按压");
      // }

      // 拓展： event.key获取key值，判断键盘的按键
      document.onkeydown = function (event) {
        var key = event.key; //获取到的是 key值；
        var str = `按了${key}`;
        console.log(str);
      };
      //只在document上执行键盘事件有效 选一个盒子不行
      //   document.querySelector("div").onkeydown = function (event) {
      //     var key = event.key; //获取到的是 key值；
      //     var str = `按了${key}`;
      //     console.log(str);
      //   };
      // event.keycode 在最新浏览器标准中废弃了，虽然废弃但是还可以使用；
      // document.onkeydown = function(event){
      //     // ASSCI 码的值 ；
      //         var keycode = event.keyCode || event.which;   // 火狐2.0 需要用event.which来获取keycode
      //         // console.log(keycode)
      //         if(keycode==65){
      //             console.log("按了a键")
      //         }else if(keycode==66){
      //             console.log("按下了b键");

      //         }

      // }
    </script>
  </body>
</html>
